<template>
  <view class="duty-checkin-page">
    <!-- 导航栏 -->
    <view class="navbar">
      <image 
        class="icon-image" 
        src="/static/icons/arrow-left.svg" 
        mode="aspectFit" 
        @click="goBack"
      />
      <text class="navbar-title">值班签到</text>
      <view class="navbar-right"></view>
    </view>

    <!-- 统计数据区域 -->
    <view class="stats-section">
      <view class="stats-grid">
        <view class="stat-item">
          <text class="stat-value">{{ statsData.totalPersonnel }}</text>
          <text class="stat-label">总人员</text>
        </view>
        <view class="stat-item">
          <text class="stat-value">{{ statsData.checkedIn }}</text>
          <text class="stat-label">已签到</text>
        </view>
        <view class="stat-item">
          <text class="stat-value">{{ statsData.notCheckedIn }}</text>
          <text class="stat-label">未签到</text>
        </view>
        <view class="stat-item">
          <text class="stat-value">{{ statsData.totalBerthGroups }}</text>
          <text class="stat-label">泊位分组</text>
        </view>
        <view class="stat-item">
          <text class="stat-value">{{ statsData.activeBerthGroups }}</text>
          <text class="stat-label">活跃分组</text>
        </view>
        <view class="stat-item">
          <text class="stat-value">{{ statsData.checkinRate }}%</text>
          <text class="stat-label">签到率</text>
        </view>
      </view>
    </view>

    <!-- 筛选区域 -->
    <view class="filter-section">
      <view class="filter-row">
        <view class="filter-item">
          <text class="filter-label">班次:</text>
          <picker 
            :value="selectedShiftIndex" 
            :range="shiftList" 
            range-key="name"
            @change="onShiftChange"
          >
            <view class="picker-display">
              <text>{{ selectedShift.name || '请选择班次' }}</text>
              <image class="icon-image-small" src="/static/icons/chevron-down.svg" mode="aspectFit" />
            </view>
          </picker>
        </view>
        
        <view class="filter-item">
          <text class="filter-label">日期:</text>
          <picker 
            mode="date" 
            :value="selectedDate"
            @change="onDateChange"
          >
            <view class="picker-display">
              <text>{{ selectedDate || '请选择日期' }}</text>
              <image class="icon-image-small" src="/static/icons/calendar-icon.svg" mode="aspectFit" />
            </view>
          </picker>
        </view>
      </view>
      
      <view class="search-row">
        <view class="search-input">
          <input 
            v-model="searchKeyword" 
            placeholder="搜索人员姓名或泊位编号" 
            @input="onSearchInput"
          />
          <image class="icon-image-small" src="/static/icons/search.svg" mode="aspectFit" />
        </view>
        <button class="refresh-btn" @click="refreshData">
          <image class="icon-image-medium" src="/static/icons/reload.svg" mode="aspectFit" />
        </button>
      </view>
    </view>

    <!-- 查看模式切换 -->
    <view class="view-mode-section">
      <view class="mode-tabs">
        <view 
          class="mode-tab"
          :class="{ active: viewMode === 'personnel' }"
          @click="switchViewMode('personnel')"
        >
          <image class="icon-image-small" src="/static/icons/users.svg" mode="aspectFit" />
          <text>按人员查看</text>
        </view>
        <view 
          class="mode-tab"
          :class="{ active: viewMode === 'berth' }"
          @click="switchViewMode('berth')"
        >
          <image class="icon-image-small" src="/static/icons/map-pin.svg" mode="aspectFit" />
          <text>按泊位查看</text>
        </view>
      </view>
    </view>

    <!-- 内容区域 -->
    <view class="content-section">
      <!-- 按人员查看 -->
      <scroll-view v-if="viewMode === 'personnel'" class="content-scroll" scroll-y>
        <view class="personnel-list">
          <view 
            v-for="person in filteredPersonnel" 
            :key="person.id"
            class="personnel-item"
            @click="showPersonnelDetail(person)"
          >
            <view class="personnel-avatar">
              <image 
                :src="person.avatar || '/static/images/default-avatar.png'" 
                mode="aspectFill"
              />
            </view>
            <view class="personnel-info">
              <view class="personnel-name">{{ person.name }}</view>
              <view class="personnel-role">{{ person.role }}</view>
              <view class="personnel-shift">{{ person.shiftName }}</view>
            </view>
            <view class="checkin-status">
              <view 
                class="status-badge"
                :class="getCheckinStatusClass(person.checkinStatus)"
              >
                {{ getCheckinStatusText(person.checkinStatus) }}
              </view>
              <view v-if="person.checkinTime" class="checkin-time">
                {{ person.checkinTime }}
              </view>
            </view>
            <image class="icon-image-small" src="/static/icons/chevron-down.svg" mode="aspectFit" />
          </view>
        </view>
      </scroll-view>

      <!-- 按泊位查看 -->
      <scroll-view v-else class="content-scroll" scroll-y>
        <view class="berth-groups">
          <view 
            v-for="group in filteredBerthGroups" 
            :key="group.id"
            class="berth-group"
          >
            <view class="group-header" @click="toggleGroupExpand(group.id)">
              <view class="group-info">
                <text class="group-name">{{ group.name }}</text>
                <text class="group-stats">{{ group.checkedInCount }}/{{ group.totalCount }} 已签到</text>
              </view>
              <view class="group-progress">
                <view class="progress-bar">
                  <view 
                    class="progress-fill"
                    :style="{ width: group.checkinRate + '%' }"
                  ></view>
                </view>
                <text class="progress-text">{{ group.checkinRate }}%</text>
              </view>
              <image 
                class="icon-image-small expand-icon"
                :class="{ expanded: group.expanded }"
                src="/static/icons/chevron-down.svg" 
                mode="aspectFit" 
              />
            </view>
            
            <view v-if="group.expanded" class="group-content">
              <view 
                v-for="member in group.members" 
                :key="member.id"
                class="group-member"
                @click="showPersonnelDetail(member)"
              >
                <view class="member-info">
                  <text class="member-name">{{ member.name }}</text>
                  <text class="member-berth">负责泊位: {{ member.berthNumbers.join(', ') }}</text>
                </view>
                <view class="member-status">
                  <view 
                    class="status-badge small"
                    :class="getCheckinStatusClass(member.checkinStatus)"
                  >
                    {{ getCheckinStatusText(member.checkinStatus) }}
                  </view>
                  <view v-if="member.checkinTime" class="checkin-time small">
                    {{ member.checkinTime }}
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>

    <!-- 人员详情弹窗 -->
    <u-popup v-model="showPersonnelDetailModal" mode="bottom" height="70%">
      <view class="personnel-detail">
        <view class="detail-header">
          <text class="detail-title">人员详情</text>
          <image 
            class="icon-image" 
            src="/static/icons/x.svg" 
            mode="aspectFit" 
            @click="closePersonnelDetail"
          />
        </view>
        
        <view v-if="selectedPersonnel" class="detail-content">
          <view class="personnel-profile">
            <view class="profile-avatar">
              <image 
                :src="selectedPersonnel.avatar || '/static/images/default-avatar.png'" 
                mode="aspectFill"
              />
            </view>
            <view class="profile-info">
              <text class="profile-name">{{ selectedPersonnel.name }}</text>
              <text class="profile-role">{{ selectedPersonnel.role }}</text>
              <text class="profile-phone">{{ selectedPersonnel.phone }}</text>
            </view>
          </view>
          
          <view class="detail-sections">
            <view class="detail-section">
              <text class="section-title">签到信息</text>
              <view class="detail-item">
                <text class="detail-label">签到状态:</text>
                <view 
                  class="status-badge"
                  :class="getCheckinStatusClass(selectedPersonnel.checkinStatus)"
                >
                  {{ getCheckinStatusText(selectedPersonnel.checkinStatus) }}
                </view>
              </view>
              <view v-if="selectedPersonnel.checkinTime" class="detail-item">
                <text class="detail-label">签到时间:</text>
                <text class="detail-value">{{ selectedPersonnel.checkinTime }}</text>
              </view>
              <view v-if="selectedPersonnel.checkinLocation" class="detail-item">
                <text class="detail-label">签到位置:</text>
                <text class="detail-value">{{ selectedPersonnel.checkinLocation }}</text>
              </view>
            </view>
            
            <view class="detail-section">
              <text class="section-title">班次信息</text>
              <view class="detail-item">
                <text class="detail-label">当前班次:</text>
                <text class="detail-value">{{ selectedPersonnel.shiftName }}</text>
              </view>
              <view class="detail-item">
                <text class="detail-label">班次时间:</text>
                <text class="detail-value">{{ selectedPersonnel.shiftTime }}</text>
              </view>
            </view>
            
            <view class="detail-section">
              <text class="section-title">负责区域</text>
              <view class="detail-item">
                <text class="detail-label">泊位分组:</text>
                <text class="detail-value">{{ selectedPersonnel.berthGroupName }}</text>
              </view>
              <view class="detail-item">
                <text class="detail-label">负责泊位:</text>
                <text class="detail-value">{{ selectedPersonnel.berthNumbers?.join(', ') || '无' }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
export default {
  name: 'DutyCheckinPage',
  data() {
    return {
      // 统计数据
      statsData: {
        totalPersonnel: 0,
        checkedIn: 0,
        notCheckedIn: 0,
        totalBerthGroups: 0,
        activeBerthGroups: 0,
        checkinRate: 0
      },
      
      // 筛选数据
      shiftList: [],
      selectedShiftIndex: 0,
      selectedShift: {},
      selectedDate: '',
      searchKeyword: '',
      
      // 查看模式
      viewMode: 'personnel', // 'personnel' | 'berth'
      
      // 人员数据
      personnelList: [],
      filteredPersonnel: [],
      
      // 泊位分组数据
      berthGroupList: [],
      filteredBerthGroups: [],
      
      // 弹窗相关
      showPersonnelDetailModal: false,
      selectedPersonnel: null
    }
  },
  
  onLoad() {
    this.initData()
  },
  
  methods: {
    // 初始化数据
    async initData() {
      this.selectedDate = this.formatDate(new Date())
      await this.loadShifts()
      await this.loadPersonnelData()
      await this.loadBerthGroupData()
      this.updateStats()
      this.filterData()
    },
    
    // 加载班次数据
    async loadShifts() {
      try {
        // 模拟数据，实际应调用API
        this.shiftList = [
          { id: 1, name: '早班', startTime: '08:00', endTime: '16:00' },
          { id: 2, name: '中班', startTime: '16:00', endTime: '24:00' },
          { id: 3, name: '夜班', startTime: '00:00', endTime: '08:00' }
        ]
        if (this.shiftList.length > 0) {
          this.selectedShift = this.shiftList[0]
        }
      } catch (error) {
        console.error('加载班次数据失败:', error)
      }
    },
    
    // 加载人员数据
    async loadPersonnelData() {
      try {
        // 模拟数据，实际应调用API
        this.personnelList = this.generateMockPersonnelData()
      } catch (error) {
        console.error('加载人员数据失败:', error)
      }
    },
    
    // 加载泊位分组数据
    async loadBerthGroupData() {
      try {
        // 模拟数据，实际应调用API
        this.berthGroupList = this.generateMockBerthGroupData()
      } catch (error) {
        console.error('加载泊位分组数据失败:', error)
      }
    },
    
    // 生成模拟人员数据
    generateMockPersonnelData() {
      const personnel = []
      const names = ['张三', '李四', '王五', '赵六', '钱七', '孙八', '周九', '吴十', '郑十一', '王十二']
      const roles = ['巡检员', '组长', '副组长']
      
      for (let i = 0; i < 15; i++) {
        const isCheckedIn = Math.random() > 0.3
        const shiftId = Math.floor(Math.random() * 3) + 1
        const shift = this.shiftList.find(s => s.id === shiftId)
        
        personnel.push({
          id: i + 1,
          name: names[i % names.length] + (i > 9 ? i - 9 : ''),
          role: roles[Math.floor(Math.random() * roles.length)],
          phone: `138${Math.random().toString().substr(2, 8)}`,
          avatar: null,
          shiftId: shiftId,
          shiftName: shift?.name || '',
          shiftTime: shift ? `${shift.startTime}-${shift.endTime}` : '',
          checkinStatus: isCheckedIn ? 'checked_in' : 'not_checked_in',
          checkinTime: isCheckedIn ? this.generateRandomTime() : null,
          checkinLocation: isCheckedIn ? this.generateRandomLocation() : null,
          berthGroupId: Math.floor(Math.random() * 5) + 1,
          berthGroupName: `泊位分组${Math.floor(Math.random() * 5) + 1}`,
          berthNumbers: this.generateRandomBerthNumbers()
        })
      }
      
      return personnel
    },
    
    // 生成模拟泊位分组数据
    generateMockBerthGroupData() {
      const groups = []
      
      for (let i = 1; i <= 5; i++) {
        const members = this.personnelList.filter(p => p.berthGroupId === i)
        const checkedInCount = members.filter(m => m.checkinStatus === 'checked_in').length
        const totalCount = members.length
        const checkinRate = totalCount > 0 ? Math.round((checkedInCount / totalCount) * 100) : 0
        
        groups.push({
          id: i,
          name: `泊位分组${i}`,
          members: members,
          checkedInCount: checkedInCount,
          totalCount: totalCount,
          checkinRate: checkinRate,
          expanded: false
        })
      }
      
      return groups
    },
    
    // 生成随机时间
    generateRandomTime() {
      const now = new Date()
      const randomMinutes = Math.floor(Math.random() * 480) // 8小时内
      const time = new Date(now.getTime() - randomMinutes * 60000)
      return this.formatTime(time)
    },
    
    // 生成随机位置
    generateRandomLocation() {
      const locations = ['中央广场', '商务大厦', '购物中心', '市政府', '体育馆']
      return locations[Math.floor(Math.random() * locations.length)]
    },
    
    // 生成随机泊位号
    generateRandomBerthNumbers() {
      const count = Math.floor(Math.random() * 5) + 1
      const numbers = []
      for (let i = 0; i < count; i++) {
        numbers.push(`A${(Math.floor(Math.random() * 100) + 1).toString().padStart(3, '0')}`)
      }
      return numbers
    },
    
    // 格式化日期
    formatDate(date) {
      const year = date.getFullYear()
      const month = (date.getMonth() + 1).toString().padStart(2, '0')
      const day = date.getDate().toString().padStart(2, '0')
      return `${year}-${month}-${day}`
    },
    
    // 格式化时间
    formatTime(date) {
      const hour = date.getHours().toString().padStart(2, '0')
      const minute = date.getMinutes().toString().padStart(2, '0')
      return `${hour}:${minute}`
    },
    
    // 更新统计数据
    updateStats() {
      const total = this.personnelList.length
      const checkedIn = this.personnelList.filter(p => p.checkinStatus === 'checked_in').length
      const notCheckedIn = total - checkedIn
      const totalGroups = this.berthGroupList.length
      const activeGroups = this.berthGroupList.filter(g => g.checkedInCount > 0).length
      const checkinRate = total > 0 ? Math.round((checkedIn / total) * 100) : 0
      
      this.statsData = {
        totalPersonnel: total,
        checkedIn: checkedIn,
        notCheckedIn: notCheckedIn,
        totalBerthGroups: totalGroups,
        activeBerthGroups: activeGroups,
        checkinRate: checkinRate
      }
    },
    
    // 筛选数据
    filterData() {
      let filteredPersonnel = this.personnelList
      let filteredGroups = this.berthGroupList
      
      // 按班次筛选
      if (this.selectedShift.id) {
        filteredPersonnel = filteredPersonnel.filter(p => p.shiftId === this.selectedShift.id)
      }
      
      // 按关键词搜索
      if (this.searchKeyword.trim()) {
        const keyword = this.searchKeyword.toLowerCase()
        filteredPersonnel = filteredPersonnel.filter(p => 
          p.name.toLowerCase().includes(keyword) ||
          p.berthNumbers.some(b => b.toLowerCase().includes(keyword))
        )
        
        filteredGroups = filteredGroups.map(group => ({
          ...group,
          members: group.members.filter(m => 
            m.name.toLowerCase().includes(keyword) ||
            m.berthNumbers.some(b => b.toLowerCase().includes(keyword))
          )
        })).filter(group => group.members.length > 0)
      }
      
      this.filteredPersonnel = filteredPersonnel
      this.filteredBerthGroups = filteredGroups
    },
    
    // 班次选择变化
    onShiftChange(e) {
      this.selectedShiftIndex = e.detail.value
      this.selectedShift = this.shiftList[this.selectedShiftIndex]
      this.filterData()
    },
    
    // 日期选择变化
    onDateChange(e) {
      this.selectedDate = e.detail.value
      // 重新加载数据
      this.loadPersonnelData()
      this.loadBerthGroupData()
      this.updateStats()
      this.filterData()
    },
    
    // 搜索输入
    onSearchInput() {
      this.filterData()
    },
    
    // 刷新数据
    refreshData() {
      this.initData()
    },
    
    // 切换查看模式
    switchViewMode(mode) {
      this.viewMode = mode
    },
    
    // 切换分组展开状态
    toggleGroupExpand(groupId) {
      const group = this.filteredBerthGroups.find(g => g.id === groupId)
      if (group) {
        group.expanded = !group.expanded
      }
    },
    
    // 显示人员详情
    showPersonnelDetail(person) {
      this.selectedPersonnel = person
      this.showPersonnelDetailModal = true
    },
    
    // 关闭人员详情
    closePersonnelDetail() {
      this.showPersonnelDetailModal = false
      this.selectedPersonnel = null
    },
    
    // 获取签到状态样式类
    getCheckinStatusClass(status) {
      return {
        'status-checked-in': status === 'checked_in',
        'status-not-checked-in': status === 'not_checked_in'
      }
    },
    
    // 获取签到状态文本
    getCheckinStatusText(status) {
      const statusMap = {
        'checked_in': '已签到',
        'not_checked_in': '未签到'
      }
      return statusMap[status] || '未知'
    },
    
    // 返回上一页
    goBack() {
      uni.navigateBack()
    }
  }
}
</script>

<style scoped>
.duty-checkin-page {
  min-height: 100vh;
  background-color: #f5f5f5;
}

/* 导航栏样式 */
.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx 30rpx;
  background-color: #fff;
  border-bottom: 1px solid #eee;
}

.navbar-title {
  font-size: 36rpx;
  font-weight: 600;
  color: #333;
}

.navbar-right {
  width: 60rpx;
}

/* 图标样式 */
.icon-image {
  width: 48rpx;
  height: 48rpx;
  filter: brightness(0) saturate(100%) invert(20%) sepia(8%) saturate(1000%) hue-rotate(180deg);
}

.icon-image-small {
  width: 32rpx;
  height: 32rpx;
  filter: brightness(0) saturate(100%) invert(60%) sepia(8%) saturate(1000%) hue-rotate(180deg);
}

.icon-image-medium {
  width: 40rpx;
  height: 40rpx;
  filter: brightness(0) saturate(100%) invert(40%) sepia(8%) saturate(1000%) hue-rotate(180deg);
}

/* 统计数据区域 */
.stats-section {
  padding: 30rpx;
  background-color: #fff;
  margin-bottom: 20rpx;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30rpx;
}

.stat-item {
  text-align: center;
  padding: 20rpx;
  background-color: #f8f9fa;
  border-radius: 12rpx;
}

.stat-value {
  display: block;
  font-size: 48rpx;
  font-weight: 600;
  color: #2c5aa0;
  margin-bottom: 10rpx;
}

.stat-label {
  font-size: 24rpx;
  color: #666;
}

/* 筛选区域 */
.filter-section {
  padding: 30rpx;
  background-color: #fff;
  margin-bottom: 20rpx;
}

.filter-row {
  display: flex;
  gap: 30rpx;
  margin-bottom: 30rpx;
}

.filter-item {
  flex: 1;
}

.filter-label {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 10rpx;
  display: block;
}

.picker-display {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx;
  background-color: #f8f9fa;
  border-radius: 8rpx;
  border: 1px solid #ddd;
}

.search-row {
  display: flex;
  gap: 20rpx;
  align-items: center;
}

.search-input {
  flex: 1;
  position: relative;
}

.search-input input {
  width: 100%;
  padding: 20rpx 60rpx 20rpx 20rpx;
  background-color: #f8f9fa;
  border: 1px solid #ddd;
  border-radius: 8rpx;
  font-size: 28rpx;
}

.search-input .icon-image-small {
  position: absolute;
  right: 20rpx;
  top: 50%;
  transform: translateY(-50%);
}

.refresh-btn {
  padding: 20rpx;
  background-color: #2c5aa0;
  border: none;
  border-radius: 8rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.refresh-btn .icon-image-medium {
  filter: brightness(0) saturate(100%) invert(100%);
}

/* 查看模式切换 */
.view-mode-section {
  padding: 0 30rpx 20rpx;
}

.mode-tabs {
  display: flex;
  background-color: #fff;
  border-radius: 12rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.mode-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10rpx;
  padding: 24rpx;
  background-color: #f8f9fa;
  color: #666;
  font-size: 28rpx;
  transition: all 0.3s ease;
}

.mode-tab.active {
  background-color: #2c5aa0;
  color: #fff;
}

.mode-tab.active .icon-image-small {
  filter: brightness(0) saturate(100%) invert(100%);
}

/* 内容区域 */
.content-section {
  flex: 1;
  padding: 0 30rpx;
}

.content-scroll {
  height: calc(100vh - 500rpx);
}

/* 人员列表样式 */
.personnel-list {
  background-color: #fff;
  border-radius: 12rpx;
  overflow: hidden;
}

.personnel-item {
  display: flex;
  align-items: center;
  padding: 30rpx;
  border-bottom: 1px solid #f0f0f0;
  transition: background-color 0.3s ease;
}

.personnel-item:last-child {
  border-bottom: none;
}

.personnel-item:active {
  background-color: #f8f9fa;
}

.personnel-avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 24rpx;
  background-color: #f0f0f0;
}

.personnel-avatar image {
  width: 100%;
  height: 100%;
}

.personnel-info {
  flex: 1;
  margin-right: 20rpx;
}

.personnel-name {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 8rpx;
}

.personnel-role {
  font-size: 24rpx;
  color: #666;
  margin-bottom: 4rpx;
}

.personnel-shift {
  font-size: 24rpx;
  color: #999;
}

.checkin-status {
  text-align: right;
  margin-right: 20rpx;
}

.status-badge {
  display: inline-block;
  padding: 8rpx 16rpx;
  border-radius: 20rpx;
  font-size: 24rpx;
  font-weight: 500;
  margin-bottom: 8rpx;
}

.status-badge.small {
  padding: 6rpx 12rpx;
  font-size: 22rpx;
}

.status-checked-in {
  background-color: #d4edda;
  color: #155724;
}

.status-not-checked-in {
  background-color: #f8d7da;
  color: #721c24;
}

.checkin-time {
  font-size: 22rpx;
  color: #666;
}

.checkin-time.small {
  font-size: 20rpx;
}

/* 泊位分组样式 */
.berth-groups {
  background-color: #fff;
  border-radius: 12rpx;
  overflow: hidden;
}

.berth-group {
  border-bottom: 1px solid #f0f0f0;
}

.berth-group:last-child {
  border-bottom: none;
}

.group-header {
  display: flex;
  align-items: center;
  padding: 30rpx;
  background-color: #f8f9fa;
  transition: background-color 0.3s ease;
}

.group-header:active {
  background-color: #e9ecef;
}

.group-info {
  flex: 1;
  margin-right: 20rpx;
}

.group-name {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 8rpx;
  display: block;
}

.group-stats {
  font-size: 24rpx;
  color: #666;
}

.group-progress {
  display: flex;
  align-items: center;
  gap: 20rpx;
  margin-right: 20rpx;
}

.progress-bar {
  width: 120rpx;
  height: 8rpx;
  background-color: #e9ecef;
  border-radius: 4rpx;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background-color: #28a745;
  transition: width 0.3s ease;
}

.progress-text {
  font-size: 24rpx;
  color: #666;
  min-width: 60rpx;
}

.expand-icon {
  transition: transform 0.3s ease;
}

.expand-icon.expanded {
  transform: rotate(180deg);
}

.group-content {
  background-color: #fff;
}

.group-member {
  display: flex;
  align-items: center;
  padding: 24rpx 30rpx;
  border-bottom: 1px solid #f8f9fa;
  transition: background-color 0.3s ease;
}

.group-member:last-child {
  border-bottom: none;
}

.group-member:active {
  background-color: #f8f9fa;
}

.member-info {
  flex: 1;
  margin-right: 20rpx;
}

.member-name {
  font-size: 28rpx;
  font-weight: 500;
  color: #333;
  margin-bottom: 8rpx;
}

.member-berth {
  font-size: 22rpx;
  color: #666;
}

.member-status {
  text-align: right;
}

/* 人员详情弹窗 */
.personnel-detail {
  padding: 40rpx;
  background-color: #fff;
  border-radius: 20rpx 20rpx 0 0;
  max-height: 70vh;
  overflow-y: auto;
}

.detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 40rpx;
  padding-bottom: 20rpx;
  border-bottom: 1px solid #eee;
}

.detail-title {
  font-size: 36rpx;
  font-weight: 600;
  color: #333;
}

.personnel-profile {
  display: flex;
  align-items: center;
  padding: 30rpx;
  background-color: #f8f9fa;
  border-radius: 12rpx;
  margin-bottom: 30rpx;
}

.profile-avatar {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 30rpx;
  background-color: #e9ecef;
}

.profile-avatar image {
  width: 100%;
  height: 100%;
}

.profile-info {
  flex: 1;
}

.profile-name {
  font-size: 36rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 12rpx;
  display: block;
}

.profile-role {
  font-size: 28rpx;
  color: #666;
  margin-bottom: 8rpx;
  display: block;
}

.profile-phone {
  font-size: 26rpx;
  color: #999;
  display: block;
}

.detail-sections {
  space-y: 30rpx;
}

.detail-section {
  margin-bottom: 30rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 20rpx;
  display: block;
}

.detail-item {
  display: flex;
  align-items: center;
  padding: 20rpx 0;
  border-bottom: 1px solid #f5f5f5;
}

.detail-item:last-child {
  border-bottom: none;
}

.detail-label {
  width: 200rpx;
  font-size: 28rpx;
  color: #666;
  flex-shrink: 0;
}

.detail-value {
  flex: 1;
  font-size: 28rpx;
  color: #333;
  text-align: right;
}
</style>